<template>
    <div class="home">
      <header-tab :pageType="isEdit ? '':2"></header-tab>
      <el-card class="box-card-r">
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-position="left"
            label-width="80px"
            class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="username"v-if="isEdit">
            <el-input v-model="ruleForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="username" v-else>
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="公司名称" prop="company">
            <el-input v-model="ruleForm.company"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password">
            <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="msgCode">
            <div style="display: flex">
              <el-input v-model="ruleForm.msgCode"  type="text" id="textyzm" />
              <div style="margin: 0 5px" id="v_container"><canvas id="verifyCanvas" width="120" height="36" style="cursor: pointer;"></canvas></div>
            </div>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-radio-group v-model="ruleForm.role">
              <template v-for="item in roleList">
                <el-radio :label="item.value">{{item.label}}</el-radio>
              </template>

            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="isEdit" label="会员等级" prop="vipStage">
            <el-input :value="stageList[ruleForm.vipStage||1]"  type="text" disabled/>
          </el-form-item>
        </el-form>
        <div class="btnGroup">
          <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
<!--          <el-button @click="goBack">返回</el-button>-->
        </div>
      </el-card>
    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    import HeaderTab from "@/components/HeaderTab"
    import GVerify from "./verifyCode/verifycode"
    import {getInfo} from "@/api/login";
    import {path} from "@/path";
    let verifyCode = null
    export default {
        name: 'HomeView',
        components: {
          HeaderTab
        },
        data(){
            var validatePass = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入密码"));
                } else {
                    if (this.ruleForm.checkPass !== "") {
                        this.$refs.ruleForm.validateField("checkPass");
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return{

                ruleForm: {
                    username: '',
                    password: '',
                    pass: '',
                    phone: '',
                    company: '',
                    name: '',
                    msgCode: '',
                    role: null,
                    vipStage: 1,
                },
                rules: {
                    username: [
                        { required: true, message: "用户名不能为空！", trigger: "blur" },
                    ],
                    name: [
                        { required: true, message: "联系人不能为空！", trigger: "blur" },
                    ],
                    company: [
                        { required: true, message: "公司名称不能为空！", trigger: "blur" },
                    ],
                    phone: [
                        { required: true, message: "联系电话不能为空！", trigger: "blur" },
                    ],
                    msgCode: [
                      { required: true, message: "验证码不能为空！", trigger: "blur" },
                    ],
                    role: [
                      { required: true, message: "角色不能为空！", trigger: "change" },
                    ],
                    pass: [{ required: true, validator: validatePass, trigger: "blur" }],
                    password: [
                        { required: true, validator: validatePass2, trigger: "blur" },
                    ],
                },
                isEdit: false,
                roleList:[
                    {value:"原料生产厂家",label:"原料生产厂家"},
                    {value:"原料贸易商",label:"原料贸易商"},
                    {value:"调合厂家",label:"调合厂家"},
                    {value:"原料生产厂家和调合厂家",label:"原料生产厂家和调合厂家"},
                    {value:"原料贸易商和调合厂家",label:"原料贸易商和调合厂家"},
                    {value:"调合技术人员",label:"调合技术人员"},
                ],
            }
        },
        created(){
          this.stageList = {1:"免费会员",2:"VIP1会员",3:"VIP2会员",4:"超级会员"}
          this.handleSkip()
        },
        mounted(){
          this.initMsgCode()
        },
        methods:{
            submitForm() {
              this.$refs["ruleForm"].validate(async(valid) => {
                if(valid) {
                  if (this.ruleForm.pass === this.ruleForm.password) {
                    let data = {
                      username: this.ruleForm.username,
                      pass: this.ruleForm.pass,
                      password: this.ruleForm.password,
                      name: this.ruleForm.name,
                      phone: this.ruleForm.phone,
                      company: this.ruleForm.company,
                      role: this.ruleForm.role,
                      id: this.ruleForm.id
                    }
                    const isPass = verifyCode.validate(this.ruleForm.msgCode);
                    if (!isPass) {
                      this.$message("验证码校验失败")
                      verifyCode.refresh()
                      return
                    }
                    //这个接口需要改一下，有id修改用户信息，无id注册
                    await this.$http.postJson({url: path.register, data}).then((res) => {
                      if (res.success == true) {
                        this.$router.push({path: this.isEdit?'/home':'/login'})
                      }
                    })

                  } else {
                    this.$message("输入两次的密码不一致")
                  }
                }else{
                  return false
                }
              })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                this.$router.go(-1);
            },
            initMsgCode(){
              verifyCode = new GVerify("v_container");
            },
            handleSkip(){
                const params = this.$route.query || {}
                const skip = params.skip
                // 修改页面
                if(skip == "edit"){
                  this.isEdit = true
                  this.getUser() // 获取用户信息
                }else{ //注册
                  this.isEdit = false
                }
            },
            getUser() {
              getInfo().then((res) => {
                this.ruleForm = res.data.user
              })
            },
        }
    }
</script>

<style>

  .left form{

  }
  .left form .btnGroup{
      margin-left: 80px;
  }
  .box-card-r{
    margin: 20px auto;
    width: 500px;
    padding: 10px;
  }
  .box-card-r .el-form-item__content{
    line-height: 20px !important;
  }


</style>
